<template>
  <div class="payment-container">
    <div class="payment-card">
      <div class="payment-header">
        <button class="back-btn" @click="handleBack">
          <i class="fa fa-arrow-left"></i> 返回订单
        </button>
        <h2>订单支付</h2>
      </div>

      <!-- 加载状态 -->
      <div v-if="isLoading" class="loading-state">
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <p>正在获取支付信息...</p>
      </div>

      <!-- 错误状态 -->
      <div v-if="errorMessage" class="error-state">
        <i class="fa fa-exclamation-circle"></i>
        <p>{{ errorMessage }}</p>
        <button class="retry-btn" @click="fetchPaymentUrl">重新获取支付链接</button>
      </div>

      <!-- 支付信息 -->
      <div v-if="!isLoading && !errorMessage" class="payment-info">
        <div class="order-details">
          <p><span class="label">订单编号：</span>{{ orderId }}</p>
          <!-- <p><span class="label">支付金额：</span>¥{{ formatPrice(orderAmount) }}</p> -->
          <p><span class="label">支付方式：</span>支付宝</p>
        </div>

        <div class="payment-action">
          <button 
            class="pay-btn" 
            @click="gotoAlipay"
            :disabled="!payUrl"
          >
            <i class="fa fa-credit-card"></i> 前往支付宝支付
          </button>
          
          <p class="payment-hint">
            <i class="fa fa-info-circle"></i> 点击按钮将跳转到支付宝进行支付
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';

// 路由实例
const router = useRouter();
const route = useRoute();

// 状态管理
const isLoading = ref(true);
const errorMessage = ref('');
const payUrl = ref('');
const orderId = ref('');
const orderAmount = ref(0);

// 从路由参数获取订单ID
onMounted(() => {
  // 从URL参数中获取订单ID
  const orderIdParam = route.query.orderId || route.params.id;
  if (orderIdParam) {
    orderId.value = orderIdParam;
    fetchPaymentUrl();
  } else {
    errorMessage.value = '未找到订单信息，请返回重新操作';
    isLoading.value = false;
  }
});

/**
 * 获取支付链接 - 调用GET /order/paymethods/${id}/pay/接口
 */
const fetchPaymentUrl = async () => {
  try {
    isLoading.value = true;
    errorMessage.value = '';
    
    // 调用正确的支付接口：GET /order/paymethods/${id}/pay/
    const response = await axios.get(`/order/paymethods/${orderId.value}/pay/`);
    
    // 假设接口返回支付链接和订单金额
    if (response.data.pay_url) {
      payUrl.value = response.data.pay_url;
      
      // 如果接口返回订单金额，更新显示
      if (response.data.amount) {
        orderAmount.value = response.data.amount;
      }
    } else {
      errorMessage.value = '获取支付链接失败，请重试';
    }
  } catch (err) {
    console.error('获取支付信息错误:', err);
    errorMessage.value = err.response?.data?.message || '获取支付信息失败，请稍后重试';
  } finally {
    isLoading.value = false;
  }
};

/**
 * 跳转到支付宝支付页面
 */
const gotoAlipay = () => {
  if (payUrl.value) {
    // 在新窗口打开支付宝支付页面
    window.open(payUrl.value, '_blank');
    
    // 提示用户
    alert('已打开支付宝支付页面，请在新窗口完成支付');
    
    // 可以考虑跳转到一个"等待支付"页面
    // router.push(`/order/waiting?orderId=${orderId.value}`);
  }
};

/**
 * 格式化价格显示
 */
const formatPrice = (price) => {
  const numericPrice = Number(price);
  return isNaN(numericPrice) ? '0.00' : numericPrice.toFixed(2);
};

/**
 * 返回上一页
 */
const handleBack = () => {
  router.back();
};
</script>

<style scoped>
.payment-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  padding: 1rem;
}

.payment-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 500px;
  overflow: hidden;
}

.payment-header {
  padding: 1.2rem 1.5rem;
  background-color: #ff7a5a;
  color: white;
  position: relative;
}

.back-btn {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.back-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.payment-header h2 {
  margin: 0;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
}

.loading-state, .error-state, .payment-info {
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.loading-state i {
  font-size: 3rem;
  color: #ff7a5a;
  margin-bottom: 1rem;
  animation: spin 1.5s linear infinite;
}

.loading-state p {
  color: #666;
  margin: 0;
  font-size: 1.1rem;
}

.error-state i {
  font-size: 3rem;
  color: #dc3545;
  margin-bottom: 1rem;
}

.error-state p {
  color: #dc3545;
  margin: 0 0 1.5rem 0;
  font-size: 1.1rem;
  line-height: 1.5;
}

.retry-btn {
  padding: 0.6rem 1.5rem;
  background-color: #ff7a5a;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
}

.retry-btn:hover {
  background-color: #e66a4c;
  transform: translateY(-2px);
}

.order-details {
  text-align: left;
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.order-details p {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  color: #333;
}

.order-details p:last-child {
  margin-bottom: 0;
}

.label {
  color: #666;
  font-weight: 500;
}

.pay-btn {
  width: 100%;
  padding: 1rem;
  background-color: #1677ff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s;
}

.pay-btn:disabled {
  background-color: #ddd;
  cursor: not-allowed;
}

.pay-btn:not(:disabled):hover {
  background-color: #0f62d8;
  transform: translateY(-2px);
}

.payment-hint {
  margin: 1.5rem 0 0 0;
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
}

.payment-hint i {
  color: #ff7a5a;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
